import { PointArr3 } from '@/types';
import { ComponentProps, useState } from 'react';
import { Line3, Vector3 } from 'three';
import { PositionLine } from '..';
import { EFix, changeLine } from '../utils';

const startPoint: PointArr3 = [500, 0, 0];
const endPoint: PointArr3 = [1000, 500, 0];
type PositionLineProps = ComponentProps<typeof PositionLine>;

export function Example1() {
  const start = new Vector3().fromArray(startPoint);
  const end = new Vector3().fromArray(endPoint);
  const [line, setLine] = useState(new Line3(start, end));
  const onChange: PositionLineProps['onChange'] = ({ line, size }) => {
    setLine(changeLine({ line: line.clone(), size, fix: EFix.start }));
  };
  return <PositionLine line={line} onChange={onChange} />;
}
